<template>
  <div class="main">
    <div style="padding-bottom:60px">
      <!-- 轮播图 -->
      <div class="banner">
        <swiper class="swiper" autoplay circular interval="5000" @change="swiperChange">
          <swiper-item
            class="swiper-item"
            v-for="(item,index) in banners"
            :key="index"
            @click="goBannerDetail(item.id, 'banner')"
          >
            <img
              :class="{'img-item':true,active:currentIndex==index}"
              :src="item.pic+'?x-oss-process=image/resize,w_1035,h_510'"
              alt
            />
          </swiper-item>
        </swiper>
        <!-- 原点 -->
        <div class="indicator-box">
          <div
            :class="{indicator:true,'indicator-active':currentIndex==index}"
            v-for="(item,index) of banners"
            :key="index"
          ></div>
        </div>
      </div>
      <!-- 分类列表 -->
      <div class="listIcon" v-if="userInfo && userInfo.identity === 'FINANCIAL'">
        <div
          class="listContain"
          v-for="(item, index) in classification"
          :key="index"
          @click="goCheck(item)"
        >
          <img :src="item.pic" alt />
          <span>{{ item.classifyName }}</span>
        </div>
        <div class="listContain" @click="allProductClassify()">
          <img src="/static/images/index/allProduct.png" alt />
          <span>全部产品</span>
        </div>
      </div>
      <!-- 清和资讯列表 -->
      <div class="listQh">
        <div
          class="about"
          style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/about.png') no-repeat; background-size: 100% 100%;"
          @click="goNewsList('ABOUT')"
        >
          <p>关于清和</p>
        </div>
        <div
          class="about"
          style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/news.png') no-repeat; background-size: 100% 100%;"
          @click="goNewsList('INFORMATION')"
        >
          <p>清和资讯</p>
        </div>
        <div
          class="about"
          style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/view.png') no-repeat; background-size: 100% 100%;"
          @click="goNewsList('VIEWPOINT')"
        >
          <p>清和观点</p>
        </div>
        <div
          class="about"
          style="background: url('https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/school.png') no-repeat; background-size: 100% 100%;"
          @click="goNewsList('SCHOOL')"
        >
          <p>清和学院</p>
        </div>
      </div>
      <!-- 活动版块 -->
      <div class="activeTab">
        <van-tabs :active="active" :border="false" color="#187798" @change="tabChange" animated>
          <van-tab :title="ele" :name="ele" v-for="(ele, i) in tabList" :key="i">
            <div class="hotLit">
              <ul>
                <li
                  v-for="(item, index) in activeList"
                  :key="index"
                  @click="()=>{goDetail(i, item)}"
                >
                  <div class="imgShow">
                    <img :src="item.pic+'?x-oss-process=image/resize,w_270,h_270'" class="newsPic" />
                    <div class="activeStatus" v-if="i===0">
                      <img
                        v-if="item.activityStatus === 'NOT_START'"
                        src="/static/images/index/unstart.png"
                        alt
                      />
                      <img
                        v-if="item.activityStatus === 'ON_REGISTER'"
                        src="/static/images/index/applying.png"
                        alt
                      />
                      <img
                        v-if="item.activityStatus === 'REGISTER_END'"
                        src="/static/images/index/over.png"
                        alt
                      />
                      <img
                        v-if="item.activityStatus === 'ACTIVITY_END'"
                        src="/static/images/index/over.png"
                        alt
                      />
                      <img
                        v-if="item.activityStatus === 'ONGOING'"
                        src="/static/images/index/ing.png"
                        alt
                      />
                      <span>{{item.activityStatus==='NOT_START'?'未开始':item.activityStatus==='ON_REGISTER'?"报名中":item.activityStatus==='REGISTER_END'?"报名结束":item.activityStatus==='ONGOING'?"进行中":"活动结束"}}</span>
                    </div>
                  </div>
                  <div class="newsInfor">
                    <p>{{item.name}}</p>
                    <span v-if="i===0">报名日期：{{item.registerStartTime}}至{{item.registerEndTime}}</span>
                    <span v-else>发布日期：{{item.releaseTime}}</span>
                  </div>
                </li>
              </ul>
            </div>
            <div style="background: #f7f7f6ff;padding-bottom: 10px;" @click="goList(i)">
              <div class="activeMore">查看更多</div>
            </div>
            <div style="width: 100%;height: 100%;" @click="goNewsList('WELFARE')">
              <div class="bird">
                <img src="/static/images/iconBottom.png" alt />
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <vueTabBar :selectNavIndex="0" :target="target"></vueTabBar>
  </div>
</template>

<script>
import vueTabBar from "@/components/tabbar";
import { mapGetters } from "vuex";
import {
  bannerList,
  productClassify,
  indexInfo,
  activeList,
  apiWechatAuthMini,
  info,
  scanningCode
  // wechatToken
} from "@/api/api";
export default {
  props: {},
  data() {
    return {
      userInfo: null,
      currentIndex: 0,
      activeIndex: 0,
      active: 0,
      // 轮播图
      banners: [],
      // 分类列表
      classification: [],
      // babber标题列表
      tabList: ["热门活动", "财富礼遇", "独家研报"],
      // 活动列表
      activeList: [],
      // 首页所有信息列表
      newsList: [],
      // 清和公益
      welfareList: [],
      // 列表分页
      pages: {
        pageIndex: 1,
        pageSize: 3
      },
      target: 0
    };
  },

  computed: {
    ...mapGetters(["userInfo"])
  },
  onShow() {
    this.target += 1;
    wx.hideTabBar();
  },

  onLoad: function() {
    wx.hideTabBar({
      fail: function() {
        setTimeout(function() {
          wx.hideTabBar();
        }, 500);
      }
    });
  },
  onPullDownRefresh() {
    // Object.assign(this.$data, this.$options.data());
    this.getBannerList();
    this.getActiveList(this.pages);
    this.productClassify();
    // this.active = this.activeIndex;
    this.getUser();
    // this.getActiveList(this.pages);
    wx.getStorageSync("token") && this.getInfo();
    // 停止下拉刷新
    wx.stopPullDownRefresh();
  },
  components: { vueTabBar },
  created() {},
  watch: {},
  mounted() {
    this.getBannerList();
    this.getActiveList(this.pages);
    this.getUser();
    wx.getStorageSync("token") && this.getInfo();
  },
  methods: {
    // /** 公众号授权 */
    // async wechatToken () {
    //   const code = this.$mp.query.code;
    //   await wechatToken({ code: code });
    // },
    // 跳转到理财
    async allProductClassify() {
      wx.switchTab({
        url: `/pages/money/money/main`
      });
    },
    // 获取产品分类信息
    async productClassify() {
      await productClassify().then(res => {
        this.classification = res;
      });
    },
    /** 更新用户信息 */
    async getInfo() {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      await info()
        .then(res => {
          wx.hideLoading();
          this.userInfo = res === "" ? null : res.headImg ? res : null;
          if (res.identity === "FINANCIAL") {
            this.productClassify();
          }
        })
        .catch(msg => {});
    },
    /** 授权 */
    authorization() {
      wx.navigateTo({
        url: `/pages/PersonalCenter/userChildren/authorization/main`
      });
    },
    // 判断用户是否实名认证和风险测评，是就去到理财页面
    goCheck(item) {
      if (this.userInfo) {
        if (this.userInfo.reg) {
          if (this.userInfo.identity === "USER") {
            if (this.userInfo.realName) {
              if (this.userInfo.passRisk) {
                wx.setStorageSync("classifyId", item.id);
                wx.switchTab({
                  url: `/pages/money/money/main`
                });
              } else {
                wx.showToast({
                  title: "请先风险测评",
                  icon: "none",
                  duration: 1000
                });
                setTimeout(() => {
                  wx.navigateTo({
                    url:
                      "/pages/PersonalCenter/userChildren/evaluation/startEvaluation/main"
                  });
                }, 1000);
              }
            } else {
              wx.showToast({
                title: "请先实名认证",
                icon: "none",
                duration: 1000
              });
              setTimeout(() => {
                wx.navigateTo({
                  url: "/pages/PersonalCenter/userChildren/verified/main"
                });
              }, 1000);
            }
          } else {
            wx.setStorageSync("classifyId", item.id);
            wx.switchTab({
              url: `/pages/money/money/main`
            });
          }
        } else {
          wx.showToast({
            title: "请先注册",
            icon: "none",
            duration: 1000
          });
          setTimeout(() => {
            wx.navigateTo({
              url: "/pages/index/children/register/main"
            });
          }, 1000);
        }
      } else {
        wx.showToast({
          title: "暂无权限，请先登录",
          icon: "none",
          duration: 1000
        });
        setTimeout(() => {
          this.authorization();
        }, 1000);
      }
    },
    /** 根据code获取token */
    getUser() {
      var that = this;
      if (!wx.getStorageSync("token")) {
        wx.login({
          success(result) {
            if (result.code) {
              apiWechatAuthMini({ code: result.code }).then(res => {
                wx.setStorageSync("token", JSON.parse(res.msg).token);
                /** 小程序码绑定 */
                if (that.$mp.query.id) {
                  scanningCode({ id: that.$mp.query.id });
                }
              });
            }
          }
        });
      } else {
        if (that.$mp.query.id) {
          scanningCode({ id: that.$mp.query.id });
        }
      }
    },
    // 获取首页所有信息
    async getIndexInfo(modul) {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      this.pages.modul = modul;
      await indexInfo(this.pages).then(res => {
        wx.hideLoading();
        res.list.map(item => {
          item.releaseTime = item.releaseTime.substring(0, 10);
        });
        this.activeList = res.list;
      });
    },
    // 单独获取清和公益数据
    async getWelfareList(modul) {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      this.pages.modul = modul;
      await indexInfo(this.pages).then(res => {
        wx.hideLoading();
        this.welfareList = res.list.splice(1);
      });
    },
    // banners 部分小圆点
    swiperChange(e) {
      this.currentIndex = e.mp.detail.current;
    },
    // 获取活动列表
    async getActiveList(pages) {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      await activeList(pages).then(res => {
        this.getWelfareList("WELFARE");
        wx.hideLoading();
        res.list.map(item => {
          item.registerStartTime = item.registerStartTime.substring(0, 10);
          item.registerEndTime = item.registerEndTime.substring(0, 10);
        });
        // console.log('activeList', res.list);
        this.activeList = res.list;
      });
    },
    // 切换tab变标题
    tabChange(e) {
      let activeIndex = e.target.index;
      this.active = e.target.index;
      // 根据tabChange函数改变的索引判断显示对应内容
      if (activeIndex === 0) {
        this.getActiveList(this.pages);
      }
      if (activeIndex === 1) {
        this.getIndexInfo("COURTESY");
      }
      if (activeIndex === 2) {
        this.getIndexInfo("EXCLUSIVE");
      }
    },
    // 获取banner图片
    async getBannerList() {
      await bannerList().then(res => {
        this.banners = res;
      });
    },
    // 跳到banner情页
    goBannerDetail(id, type) {
      wx.navigateTo({
        url: `/pages/index/children/newsDetail/main?classifyId=${id}&type=${type}`
      });
    },
    // 跳转到tabber下面的详情页
    goList(index) {
      if (index === 0) {
        this.goActiveList();
      }
      if (index === 1) {
        this.goNewsList("COURTESY");
      }
      if (index === 2) {
        this.goNewsList("EXCLUSIVE");
      }
    },
    // 跳到资讯列表
    goNewsList(modul) {
      wx.navigateTo({
        url: `/pages/index/children/newsList/main?modul=${modul}`
      });
    },
    // 跳到活动列表
    goActiveList() {
      wx.navigateTo({ url: "/pages/index/children/activeList/main" });
    },
    // 跳转到tabber下面的详情页
    goDetail(index, item) {
      if (index === 0) {
        this.goActiveDetail(item.id, item.activityStatus);
      } else {
        this.goNewsDetail(item.id, "news");
      }
    },
    // 跳到资讯详情页
    goNewsDetail(id, type) {
      wx.navigateTo({
        url: `/pages/index/children/newsDetail/main?classifyId=${id}&type=${type}`
      });
    },
    // 跳到活动详情页面
    goActiveDetail(id, status) {
      wx.navigateTo({
        url: `/pages/index/children/activeDetail/main?classifyId=${id}&status=${status}`
      });
    }
  }
};
</script>

<style scoped lang="less">
.main {
  background: #f7f7f6ff;
  // 轮播图
  .banner {
    background: linear-gradient(
      180deg,
      rgba(233, 243, 246, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    padding-bottom: 15px;
    position: relative;
    .swiper {
      height: 170px;
    }

    img {
      width: 100%;
      height: 100% !important;
    }
    .swiper-item {
      box-sizing: border-box;
      padding: 0 15px;
      // height: 170px;

      .img-item {
        width: 345px;
        height: 120px;
        z-index: 5;
        position: absolute;
        top: 8px;
        border-radius: 2px;
      }

      .active {
        top: 0px;
        opacity: 1;
        z-index: 10;
        height: 138px;
        transition: all 0.2s ease-in 0s;
      }
    }
  }
  .indicator-box {
    position: absolute;
    bottom: 15px;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    .indicator {
      width: 16px;
      height: 2px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 2px;
      margin-right: 10px;
    }
    .indicator-active {
      background: rgba(255, 255, 255, 1);
    }
  }
  // 分类列表
  .listIcon {
    background: #fff;
    padding: 10px 15px 25px;
    display: flex;
    justify-content: space-between;
    .listContain {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 26px;
        height: 26px;
        margin-bottom: 9px;
      }
      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        color: rgba(107, 107, 107, 1);
        line-height: 17px;
      }
    }
  }
  // 清和列表
  .listQh {
    background: #fff;
    padding: 0 15px 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .about {
      width: 168px;
      height: 80px;
      background: rgba(157, 189, 189, 1);
      border-radius: 2px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      p {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFangSC;
        font-weight: 700;
        color: rgba(255, 255, 255, 1);
        height: 21px;
        text-indent: 20px;
      }
    }
  }
  // 活动版块
  .activeTab {
    padding-top: 15px;
    background: #fff;
  }
  .activeTab /deep/ .van-tab--active .van-ellipsis {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFangSC;
    letter-spacing: 3px;
    font-weight: 700;
    line-height: 25px;
    color: rgba(24, 119, 152, 1);
  }
  .activeTab /deep/ .van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    letter-spacing: 3px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    line-height: 25px;
    color: rgba(144, 146, 146, 1);
  }
  .activeTab /deep/ .van-tabs__line {
    bottom: 0;
    left: 18px;
    width: 26px !important;
    text-align: center !important;
    z-index: 1;
    height: 4px;
    background-color: #187798ff;
    border-radius: 3px;
  }
  .hotLit {
    padding: 0 15px;
    background-color: #fff;
    border-top: 0.5px solid #e6e6e6;
    border-bottom: 0.5px solid #e6e6e6;
    ul {
      padding-top: 16px;
      display: flex;
      flex-direction: column;
      li {
        background-color: #fff;
        margin-bottom: 15px;
        display: flex;
        .imgShow {
          width: 90px;
          height: 90px;

          position: relative;
          margin-right: 15px;
          .newsPic {
            width: 100%;
            height: 100%;
            border-radius: 3px;
          }
          .activeStatus {
            // width: 51px;
            width: 58px;
            height: 20px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            img {
              width: 100%;
              // border-radius: 3px;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
            span {
              font-size: 10px;
              font-family: PingFangSC-Medium, PingFangSC;
              font-weight: 700;
              color: rgba(255, 255, 255, 1);
              line-height: 14px;
              position: absolute;
              // left: 6px;
              // top: 3px;
              left: 0;
              top: 3px;
              right: 0;
              margin: 0 auto;
              text-indent: -10px;
            }
          }
        }
        .newsInfor {
          width: 240px;
          display: flex;
          flex-direction: column;
          font-family: PingFangSC-Regular, PingFangSC;
          justify-content: space-between;
          p {
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 700;
            color: rgba(2, 6, 4, 1);
            line-height: 21px;
            -webkit-line-clamp: 2;
          }
          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 400;
            color: rgba(144, 146, 146, 1);
            line-height: 17px;
          }
        }
      }
    }
  }
  .activeMore {
    height: 18px;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFangSC;
    font-weight: 700;
    color: rgba(24, 119, 152, 1);
    line-height: 18px;
    text-align: center;
    padding: 15px 0;
    background: #fff;
  }
  .bird {
    background: #fff;
    padding: 20px 15px;
    // width: 100%;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
